<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HIS hospital info</title>

    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/demo/demo.css">

    <!-- pure grid css -->
    <link rel="stylesheet" href="../lib/pure-release-0.6.0/tables-min.css">

    <!-- my test css -->
    <style type="text/css">
        .pure-table {
            width: 100%;
        }
        .pure-table tr {
            line-height: 20px;
        }
        .text-label {
            font-weight: bold;
            color: black;
        }
        .input-radio {
            vertical-align:middle;
            margin-top:1px;
            margin-bottom:1px;
            width:13px;
            height:13px;
        }
        .input-checkbox {
            vertical-align:middle;
            margin-top:1px;
            margin-bottom:1px;
            width:17px;
            height:17px;
        }
        .diagnosis_pop_panel {
            background-color: #EFEFEF;
        }
    </style>

    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>

</head>
<body>
    <div id="id_clinicRP">
        <div id="main_layout" class="easyui-layout" style="width:100%;height:100%;">
            <div data-options="region:'east',title:'',split:false,border:true" style="width:450px;">
                <div>
                    <a id="btn41" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">新开处方</a>
                    <a id="btn42" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">新开项目</a>
                </div>
                <div id="id_east" class="easyui-panel" style="width:100%;" title="  ">
                    <form id="ff">
                        <table class="pure-table pure-table-horizontal">

                            <tr>
                                <td colspan="2"><span class="text-label">处方类型: </span>
                                    <input type="radio" name="radio11" class="input-radio" />普通
                                    <input type="radio" name="radio11" class="input-radio" />急诊
                                    <input type="radio" name="radio11" class="input-radio" />精麻
                                </td>
                                <td></td>
                                <td></td>
                            </tr>

                            <tr>
                                <td  colspan="2"><span class="text-label">处方模式: </span>
                                    <input type="radio" name="radio12" class="input-radio" />非中药处方
                                    <input type="radio" name="radio12" class="input-radio" />中药处方
                                </td>
                                <td></td>
                                <td></td>
                            </tr>

                            <tr>
                                <td colspan="2">
                                    <span class="text-label">诊断: </span>
                                    <input id="id_diagnosis" class="easyui-textbox" data-options="buttonText:'SEARCH'" style="width:150px;height:25px">
                                </td>
                                <td>
                                    <!--<input type="checkbox" class="datagrid-header-check datagrid-cell-check" style="vertical-align:middle; margin-top:1px; margin-bottom:1px;" />匹配药品-->
                                    <input type="checkbox" class="input-checkbox" />匹配药品
                                </td>
                                <td></td>
                            </tr>

                            <tr>
                                <td  colspan="2">药品:检索拼音简码</td>
                                <td></td>
                                <td></td>
                            </tr>

                            <tr>
                                <td>单次用量:10毫克</td>
                                <td>频率:tid</td>
                                <td>用法:口服</td>
                                <td>组号:1</td>
                            </tr>

                            <tr>
                                <td  colspan="2">用药天数: 10天</td>
                                <td>售量:2盒</td>
                                <td></td>
                            </tr>

                            <tr>
                                <td></td>
                                <td colspan="3">
                                    <a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">添加</a>
                                    <a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reset'">重置</a>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div data-options="region:'center',title:'',border:true">
                <div id="id_center">
                    <div>
                        <a id="btn31" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">存模板</a>
                        <a id="btn32" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">调模板</a>
                        <a id="btn33" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">提交</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
var his = {};
//his.rgnum = 0;
$(function(){
    // 让panel组件适应当前窗口的宽度和高度.
    var body_w = $('body').width();
    var client_h = document.documentElement.clientHeight;

    $('#id_clinicRP').panel({
        width: (body_w-30),
        height: (client_h-45),
        closable: true,
        title: '门诊处方'
    });
    //
    var test_data = [
        {code:'xxx',name:'xxx',price:'xxx'},
        {code:'xxx',name:'xxx',price:'xxx'},
        {code:'xxx',name:'xxx',price:'xxx'},
        {code:'xxx',name:'xxx',price:'xxx'}
    ];
    //
    var strid = addRecipeGroup('处方一', test_data);
    addRecipeGroup('处方二', test_data);
    addRecipeGroup('处方三', test_data);
    //修改datagrid标题的方法.
    $('#'+strid).datagrid('getPanel').panel('setTitle', '修改后的title');
    //
    optEastPanel();
    //
    testcssstyle();
    //func_focus_diagnosis
    func_focus_diagnosis();
});
//添加一个处方组合.
function addRecipeGroup(){
    var args = arguments;
    //datagrid的标题为传入的第一个参数.
    var dg_title = args[0];
    //第二个参数为datagrid的column数据.
    var _data = args[1];
    //每次调用都增1的id种子.
    var rg = his.rgnum = his.rgnum+1 || 1;
    var strid = "id_dg0" + rg;
    var tpl = '<div id="{1}"></div>';
    $('#id_center').append( tpl.replace('{1}', strid) );
    $('#'+strid).datagrid({
        title: dg_title,
        singleSelect: true,
        columns:[[
            {field:'code',title:'Code',width:100},
            {field:'name',title:'Name',width:100},
            {field:'price',title:'Price',width:100,align:'right'}
        ]],
        data: _data
    });
    //将新添加的datagrid的ID返回.
    return strid;
}
//
function optEastPanel(){
    // $('#id_east').panel();
//    $('#id_east').css('width', '100%');
//    $.parser.parse('#id_east');
}
//
function testcssstyle(){
    var puregs = $('.pure-g');
    $.each(puregs, function(i,n){
        $(n).find('div:odd').css('backgroundColor','#e4e4e4');
    });
}
//诊断: id_diagnosis
function func_focus_diagnosis(){
    //fire when document's ready
    var tpl = '<div id="id_poppanel_diagnosis"></div>';
    var tpl2 = '<div id="id_tmp_diagnosis_01"></div>';
    $('#id_diagnosis').textbox('textbox').bind('focus',function(){
        var args = arguments;
        var POS = $(args[0].currentTarget).offset();
        var H = $(args[0].currentTarget).outerHeight()+1;

        if( $('body').find('div[id="id_poppanel_diagnosis"]').length === 0 ){
            $('body').append(tpl);
        }
        if( $('#id_poppanel_diagnosis').find('div[id="id_tmp_diagnosis_01"]').length === 0 ){
            $('#id_poppanel_diagnosis').append(tpl2);
        }
        $('#id_tmp_diagnosis_01').panel({
            left: POS.left,
            top: POS.top+H,
            width:300,
            height:150,
            noheader:false,
            closable:true,
            title:' ',
            style: {
                position:'absolute'
            },
            bodyCls: 'diagnosis_pop_panel',
            onClose: function(){
                $('#id_poppanel_diagnosis').empty();
            }
        });
        var pbody = $('#id_tmp_diagnosis_01').panel('body');
        var btn_tpl = '<a id="btn" href="#" class="easyui-linkbutton">easyui</a>';
        pbody.append('111');
        pbody.append(btn_tpl);
    });
    $('#id_diagnosis').textbox('textbox').bind('blur',function(){
//        $('#id_poppanel_diagnosis').empty();
    });
}
</script>
</html>